<template>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in fruitsData" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td>
                    <button @click="decrement(item)">-</button>
                    {{ item.count }}
                    <button @click="item.count++">+</button>
                </td>
                <td>{{ item.count * item.price }}</td>
                <td><button @click="deleteItem(item)">删除</button></td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
import { ref } from 'vue';

const fruitsData = ref([
    { id: 1, name: '苹果', count: 5, price: 4 },
    { id: 2, name: '苹果', count: 5, price: 4 },
    { id: 3, name: '苹果', count: 5, price: 4 },
])

// 数量--
function decrement(fruitItem) {
    fruitItem.count--;
    if (fruitItem.count <= 0) {
        deleteItem(fruitItem);
    }
}

// 删除
function deleteItem(fruitItem) {
    fruitsData.value = fruitsData.value.filter(item => item.id != fruitItem.id)
}


</script>

<style scoped></style>